<template>
  <a-modal title="消费账户转账" :footer="false" title-align="start" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="900">
    <div>
      <span>当前可转账金额</span>
      <span>￥{{ $extract(props.accountInfo, 'consumeWalletAccount.availabeBalance') }}</span>
    </div>
    <div>只能转出余额，赠送部分不能转出。</div>
    <a-space>
      <a-input-number v-model="amountNum" allow-clear hide-button placeholder="请输入充值金额，只能输入整数" style="width: 250px">
        <template #prefix> ￥ </template>
      </a-input-number>
      <a-button class="gray-outline" @click="confirmToUp">确认转账</a-button>
    </a-space>
    <div class="mt10 mb10"> 转入账户：{{ $extract(props.accountInfo, 'withdrawWalletAccount.accountName') }}（ID:{{ $extract(props.accountInfo, 'withdrawWalletAccount.code') }}） </div>

    <div class="title-bar">转账记录</div>
    <a-table size="mini" class="table-two-line" :data="dataList" @sorter-change="sortChange" :loading="loading" :pagination="false" :scroll="{ y: 400 }">
      <template #columns>
        <a-table-column title="时间" #cell="{ record, rowIndex }" :width="140" data-index="gmtCreate" :sortable="{ sortDirections: ['ascend', 'descend'] }">
          {{ $setTime(record.gmtCreate) }}
        </a-table-column>
        <a-table-column title="金额" #cell="{ record, rowIndex }" :width="80" data-index="amount" :sortable="{ sortDirections: ['ascend', 'descend'] }"> ￥ {{ record.amount }} </a-table-column>
        <a-table-column title="操作人" #cell="{ record, rowIndex }" :width="80">
          {{ record.optUserName }}
        </a-table-column>
        <a-table-column title="余额(之前)" #cell="{ record, rowIndex }" :width="80"> ￥{{ record.beforeAvailabeBalance }} </a-table-column>
        <a-table-column title="余额(之后)" #cell="{ record, rowIndex }" :width="80"> ￥{{ record.afterAvailabeBalance }} </a-table-column>
      </template>
    </a-table>
    <div class="pagination-footer" style="margin: 10px 0 0">
      <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { completeTransferRequest, findCompanyTransferRequestPage } from '@/api/finance/wallet'

  let props = defineProps(['modelValue', 'accountInfo'])
  let emits = defineEmits(['update:modelValue', 'save'])
  let dataList = ref([])
  let loading = ref(false)
  let amountNum = ref()
  let pageNation = ref({ total: 0, pageSize: 20, pageNum: 1 })
  let searchValue: any = ref({
    sortField: 'gmtCreate',
    sortAsc: false,
  })
  let showvisible: any = computed({
    set(val) {
      emits('update:modelValue', val)
    },
    get() {
      return props.modelValue
    },
  })
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }
  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }
  const getList = async () => {
    let params = {
      ...searchValue.value,
      accountId: props.accountInfo.consumeWalletAccount.id,
      bizType: 'TRANSFER',
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }

    if (!params.sortField) {
      params.sortField = 'gmtCreate'
      params.sortAsc = false
    }
    loading.value = true
    const res: any = await findCompanyTransferRequestPage(params)
    if (res) {
      dataList.value = res?.data?.records || []
      pageNation.value.total = res?.data?.total || 0
    }
    loading.value = false
  }
  const confirmToUp = async () => {
    if (!amountNum.value) return Message.error('请输入转账金额')
    if (amountNum.value > props.accountInfo.consumeWalletAccount.availabeBalance) return Message.error('当前输入金额大于可转账最大金额')
    let params = {
      amount: amountNum.value,
      fromAccountId: props.accountInfo.consumeWalletAccount.id,
      toAccountId: props.accountInfo.withdrawWalletAccount.id,
    }
    const res: any = await completeTransferRequest(params)
    if (res) {
      Message.success('转账成功')
      amountNum.value = ''
      emits('save')
      getList()
    }
  }

  onMounted(() => {
    getList()
  })
</script>

<style lang="less" scoped></style>
